<template>
    <div class="card-waic">
        <div class="main_left_header flex">
            <slot></slot>
            <div class="flex ac">
                <!-- <i @click="showActiveStar" class="iconfont iconxingxing2" :style="{ color: isStar ? '#f5d923' : '#ccc' }"></i> -->
                <div class="bcBlue" @click="$emit('add')"><slot name="icon"></slot></div>
            </div>
        </div>
        <el-input class="input_seek" placeholder="请输入内容" prefix-icon="el-icon-search" v-model="params.Keyword" @change="changeinput"> </el-input>
        <gg-scroll :downState.sync="downState" viewNode="" ref="scroll" @onscroll="onscroll" @onpullingDown="onpullingDown" @onpullingup="onpullingup" :showPullup.sync="showPullup">
            <div class="card_item flex" :id="'item' + i" v-for="(item, i) in list" :key="i" @click="clickCard(i, item)" :class="index == i ? 'checked' : ''">
                <div class="imge" v-if="item[range_img]">
                    <el-image :src="item[range_img] | ImgFilter" v-viewer>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div class="card_desc">
                    <el-tooltip effect="dark" :content="item[range_name]" placement="top-start">
                        <div>
                            <span v-if="item[range_new]" class="isNew">新</span>
                            <span v-if="item[range_top]" class="isTop">置顶</span>
                            <span class="e1 name">{{ item[range_name] }}</span>
                            <gg-bg-state v-if="item[range_state]" :state="item[range_state] || 2" height="16rem">{{ item[range_stateName] }}</gg-bg-state>
                        </div>
                    </el-tooltip>
                    <el-tooltip effect="dark" :content="range_message1 ? item[range_message] + '-' + item[range_message1] : item[range_message]" placement="bottom-start">
                        <div>{{ range_message1 ? item[range_message] + "-" + item[range_message1] : item[range_message] }}</div>
                    </el-tooltip>
                </div>
                <div class="deta">
                    <div>{{ item[range_time] | dateFilter(dateFilter) }}</div>
                    <!-- <gg-bg-state v-if="item[range_state]" :state="item[range_state] || 2" height="16rem">{{ item[range_stateName] }}</gg-bg-state> -->
                </div>
            </div>
        </gg-scroll>
    </div>
</template>

<script>
function jumpPage(that) {
    if (JSON.parse(sessionStorage.getItem("secondHeaderInfo")) && JSON.parse(sessionStorage.getItem("secondHeaderInfo")).queryName) {
        let queryName = JSON.parse(sessionStorage.getItem("secondHeaderInfo")).queryName;
        let queryData = JSON.parse(sessionStorage.getItem("secondHeaderInfo")).selectId;

        if (Array.isArray(queryData) && queryData.length == 0) {
            that[queryName] = 0;
        } else {
            that[queryName] = queryData;
        }
        sessionStorage.removeItem("secondHeaderInfo");
    }
}
const defaultParams = {
    Keyword: "",
    MaxResultCount: 15,
    SkipCount: 0,
};
export default {
    name: "qg-session",
    props: {
        defaultList: {
            type: Array,
            default: () => [],
        },
        range_new: {
            type: String,
            default: "",
        },
        range_top: {
            type: String,
            default: "",
        },
        range_img: {
            type: String,
            default: "",
        },
        range_state: {
            type: String,
            default: "",
        },
        range_stateName: {
            type: String,
            default: "",
        },
        range_name: {
            type: String,
            default: "",
        },
        range_message: {
            type: String,
            default: "",
        },
        range_message1: {
            type: String,
            default: "",
        },
        range_time: {
            type: String,
            default: "",
        },
        immediate: {
            type: Boolean,
            default: true,
        },
        starApi: {
            type: String,
            default: "api/TokenAuth/Authenticate",
        },
        api: {
            type: String,
            default: "",
        },
        dateFilter: {
            type: String,
            default: "hh:mm",
        },
    },
    data() {
        return {
            list: [],
            params: { ...defaultParams },
            initParams: {},
            selectParams: {},
            isCarry: true,
            page: 0,
            totalCount: 0,
            inputSeek: "",
            index: 0,
            isStar: false,
            showPullup: false, //控制下拉文字显示
            downState: 0, //上拉状态值
            // pageCount:15,
        };
    },
    async mounted() {
        if (!this.immediate) return;
        jumpPage(this.params);
        this.init();
    },
    methods: {
        async init(e) {
            this.page = 0;
            this.initParams = Object.assign(this.initParams, e);
            this.params = { ...defaultParams, ...this.initParams };
            await this.getList(false);
            if ((this.list[0] || {}).id) {
                this.clickCard(0, this.list[0]);
            }
        },
        async getList(isPush = true) {
            // 用于查看页面效果
            if (this.defaultList.length) return (this.list = this.defaultList);
            let { result } = await this.$req.get(this.api, this.params);
            if (isPush) {
                this.list.push(...(result.items || []));
            } else {
                this.list = result.items;
            }
            this.totalCount = result.totalCount;
            this.$nextTick(() => {
                this.downState = 0;
                this.showPullup = false;
                this.$refs.scroll.betterS.finishPullUp();
                this.$refs.scroll.betterS.refresh();
            });
        },
        async collect(id, i) {
            let { success } = await this.$req.post(this.starApi, { studentId: id });
            if (success) this.list[i].isStar = !this.list[i].isStar;
        },
        showActiveStar() {
            this.isStar = !this.isStar;
            this.getList(false);
        },
        changeinput(n) {
            this.getList(false);
        },

        clickCard(i, item) {
            this.index = i;
            this.$emit("change", item.id);
        },
        async onscroll(res) {},
        async onscrollEnd(res) {},
        onpullingDown() {
            this.init(false);
        },
        async onpullingup() {
            ++this.page;
            this.params.SkipCount = this.page * this.params.MaxResultCount;
            // if (this.params.SkipCount >= this.totalCount + this.params.MaxResultCount) {
            if (this.params.SkipCount >= this.totalCount) {
                this.showPullup = false;
            } else {
                await this.getList();
            }
        },
    },
};
</script>

<style lang="less" scoped>
.main_left_header {
    justify-content: space-between;
    /deep/.el-input__inner {
        border: none;
    }
    cursor: pointer;
    align-items: center;
    div:nth-child(2) {
        // flex: 1.5;
        margin-left: 10rem;
    }
    .bcBlue {
        width: 36rem;
        height: 36rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #7659ff;
        border-radius: 4rem;
        color: #fff;
        & > div {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}
.input_seek {
    margin: 17rem 0rem;
}
.checked {
    background-color: #f6f5fa !important;
}
.card-waic {
    height: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card_item {
    background-color: #fff;
    height: 64rem;
    padding: 12rem;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
    &:hover {
        background-color: #f6f5fa;
    }
    .imge {
        width: 40rem;
        height: 40rem;
        margin-right: 9rem;
        /deep/.el-image {
            width: 100%;
            height: 100%;
            .image-slot {
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                i {
                    font-size: 30rem;
                }
            }
        }
    }
    .card_desc {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 2;
        & > div:nth-child(1) {
            flex: 1;
            display: flex;
            & > .name {
                // width: 0;
                // flex: 1;
                max-width: 100rem;
                font-size: 14rem;
                margin-right: 10rem;
            }
        }
        & > div:nth-child(2) {
            font-size: 12rem;
            overflow: hidden; /*超出部分隐藏*/
            text-overflow: ellipsis; /* 超出部分显示省略号 */
            white-space: nowrap; /*规定段落中的文本不进行换行 */
            width: 120rem;
            color: #999999;
        }
    }
    .deta {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 12rem;
        &.active {
            color: #f5d923;
        }
        i {
            color: #ccc;
        }
    }
}
.isNew {
    width: 20rem;
    height: 20rem;
    background-color: #f5434d;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 100%;
}
.isTop {
    width: 40rem;
    height: 20rem;
    background-color: #f5434d;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: 4rem;
}
</style>
